<template>
    <div class="preview-container">
        <!-- 主体内容 -->
        <div class="preview-header">
            <h2>条形码预览</h2>
            <p>请确认产品信息后点击打印</p>
        </div>

        <!-- 条形码尺寸选择下拉框 -->
        <div class="barcode-size-select">
            <el-select v-model="selectedSize" placeholder="选择条形码尺寸" @change="updatePreviewSize" value-key="id">
                <el-option v-for="(size, index) in sizes" :key="index" :label="size.label" :value="size.value" />
            </el-select>
        </div>

        <!-- 条形码预览区域 -->
        <div class="barcode-preview-container">
            <div class="barcode-preview" id="aa" :style="{ width: pageWidth + 'mm', height: pageHeight + 'mm'}">
                <img id="barcode" :style="{ width: barcodeWidth + 'mm', height: barcodeHeight + 'mm'}">
                <!-- 将gtin放置在条形码下方 -->
                <span class="barcode-gtin">{{ this.gtin }}</span>
                <span class="barcode-walmartProductName">{{ this.walmartProductName }}</span>
            </div>
        </div>

        <!-- 条形码信息区域 -->
        <div class="barcode-info">
            <p><strong>GTIN:</strong> {{ gtin }}</p>
            <p><strong>条形码描述:</strong> {{ description }}</p>
        </div>

        <!-- 打印按钮 -->
        <div class="print-button-container">
            <el-button type="primary" class="common-button print-button" @click="printBarcode">
                打印条形码
            </el-button>
        </div>
    </div>
</template>

<script>
// 导入条形码生成库 JsBarcode
import JsBarcode from 'jsbarcode'
import printJS from 'print-js'

export default {
    name: 'PrintPage',
    data() {
        return {
            gtin: '', // 存储从 URL 获取的 GTIN
            walmartProductName: '',
            description: '此为预览条形码', // 产品描述（可以根据需要调整或传递）
            selectedSize: { id: 1, width: 60, height: 40 }, // 默认选择条形码尺寸 60mm x 40mm
            sizes: [
                { label: '60mm x 40mm', value: { id: 1, width: 60, height: 40 } },
                { label: '50mm x 30mm', value: { id: 2, width: 50, height: 30 } },
                { label: '80mm x 60mm', value: { id: 3, width: 80, height: 60 } },
                { label: '70mm x 20mm', value: { id: 4, width: 70, height: 20 } },
                { label: '100mm x 100mm', value: { id: 5, width: 100, height: 100 } },
                { label: '100mm x 150mm', value: { id: 6, width: 100, height: 150 } }
            ],
            barcodeWidth: 48, // 条形码宽度，单位mm
            barcodeHeight: 20, // 条形码高度，单位mm  
            pageWidth: 60,  // 打印纸张宽度
            pageHeight: 40, // 打印纸张高度
        }
    },
    mounted() {
        // 从 URL 获取 GTIN 参数
        const printData = JSON.parse(sessionStorage.getItem('printData'));
        this.gtin = printData.gtin || '';
        this.walmartProductName = printData.walmartProductName || '';
        if (this.gtin) {
            // 延迟条形码生成，确保 DOM 元素已渲染
            this.$nextTick(() => {
                this.generateBarcode(this.gtin);
            });
        }
    },
    methods: {
        printBarcode() {
            // 在打印时确保样式与页面一致
            printJS({
                printable: 'aa', // 打印区域的 ID
                type: 'html',
                documentTitle: '条形码打印',
                style: `
                @page {
                  size: ${this.pageWidth}mm ${this.pageHeight}mm;
                  margin: 0;
                }
                body {
                  margin: 0;
                  padding: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
                  background: #fff;
                }
                .barcode-preview {
                    background-color: #ffffff;
                    margin-bottom: 20px;
                    padding: 5px 10px 10px 10px;
                    display: flex;
                    flex-direction: column;
                    width: ${this.pageWidth}mm;
                    height: ${this.pageHeight}mm;
                }
                #barcode {
                  width: ${this.barcodeWidth}mm;
                  height: ${this.barcodeHeight}mm;
                }
                .barcode-gtin {
                    font-size: 16px;
                    color: #333;
                    margin-left: 4%;
                }

                .barcode-walmartProductName {
                    font-size: 16px;
                    color: #333;
                    margin-left: 4%;
                    margin-top: 2%;
                    display: inline-block;
                    width: 150px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
              `,
            });
        },

        generateBarcode(gtin) {
            const svg = document.createElement('svg');
            JsBarcode(svg, gtin, {
                format: 'CODE128',
                displayValue: false,
                font: 'monospace',
                width: 2,
                height: this.barcodeHeight, // 根据选择的高度调整
                margin: 10,
            });

            // 将 SVG 转为字符串
            let svgData = new XMLSerializer().serializeToString(svg);

            // 移除所有 xmlns 属性，避免重复定义
            svgData = svgData.replace(/xmlns="[^"]+"/g, '');

            // 确保只有一个 xmlns 属性，并添加正确的命名空间
            svgData = svgData.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');

            // 将字符串编码为 Base64
            const base64 = `data:image/svg+xml;base64,${btoa(svgData)}`;

            // 设置 img 的 src
            const imgElement = document.getElementById('barcode');
            imgElement.src = base64;
        },

        // 根据选择的尺寸更新条形码和预览区域的大小
        updatePreviewSize() {
            // 更新打印纸张大小
            this.pageWidth = this.selectedSize.width;
            this.pageHeight = this.selectedSize.height;

            // 计算条形码的尺寸，根据纸张的比例进行缩放
            this.barcodeWidth = this.pageWidth * 0.8;
            this.barcodeHeight = this.pageHeight * 0.5; // 保持条形码的比例
        }
    }
}
</script>

<style lang="scss" scoped>
.preview-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 确保所有元素居中 */
}

.barcode-gtin {
    /* 在条形码和GTIN之间留出空隙 */
    font-size: 16px;
    /* 设置GTIN的字体大小 */
    color: #333;
    margin-left: 4%;
    margin-top: 0.1%;
    /* 设置字体颜色 */
}

.barcode-walmartProductName {
    font-size: 16px; /* 设置字体大小 */
    color: #333; /* 设置字体颜色 */
    margin-left: 4%;
    margin-top: 2%;
    display: inline-block; /* 保证容器为块级元素 */
    width: 150px; /* 设置最大宽度 */
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出部分 */
    text-overflow: ellipsis; /* 超出部分使用省略号代替 */
}


.preview-header {
    text-align: center;
    margin-bottom: 20px;
}

.preview-header h2 {
    font-size: 24px;
    color: #333;
    font-weight: bold;
}

.preview-header p {
    color: #777;
    font-size: 16px;
}

.barcode-size-select {
    margin: 20px 0;
    text-align: center;
}

.barcode-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.barcode-preview {
    background-color: #ffffff;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 0px 0px 0px 10px;
    display: flex;
    flex-direction: column;
    /* 垂直排列条形码和gtin */
    // justify-content: center;
    // align-items: center;
}

.barcode-info {
    text-align: center;
    color: #555;
    font-size: 16px;
    margin-bottom: 30px;
    margin-top: 20px;
    /* 确保信息区域与预览区域不重叠 */
}

.barcode-info p {
    margin: 5px 0;
}

.print-button-container {
    text-align: center;
    margin-top: 30px;
    /* 固定的间距 */
}

.common-button {
    font-size: 16px;
    padding: 10px 20px;
    background-color: #62afe3;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.common-button:hover {
    background-color: #4a9dd0;
}
</style>